<template>
	<view class="tar">
		<ant-tabs type="primary" :items="items" :current="current" onChange="onChange" />

		<swiper :current="current" :autoplay="false" :vertical="false" :circular="false" onChange="onSwipeChange">
			<block v-for="(item, index) in items" :key="index">
				<swiper-item>
					<view class="containercontent">
						<container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
							<view>
								<view class="container">
									<image class="left" mode="scaleToFill" :src="item.image" />
									<view class="content">
										<view class="title1">
											{{ item.name }}
										</view>
										<view class="title2">
											{{ item.interpretation }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.dingdannumber }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.adress }}
											<view class="title2right">￥{{ item.price }}</view>
										</view>
									</view>
								</view>
							</view>

							<view slot="headerRight" style="color: #f48315">
								{{ item.state }}
							</view>
						</container>
					</view>
				</swiper-item>

				<swiper-item>
					<view class="containercontent">
						<container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
							<view>
								<view class="container">
									<image class="left" mode="scaleToFill" :src="item.image" />
									<view class="content">
										<view class="title1">
											{{ item.name }}
										</view>
										<view class="title2">
											{{ item.interpretation }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.dingdannumber }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.adress }}
											<view class="title2right">￥{{ item.price }}</view>
										</view>
									</view>
								</view>
							</view>

							<view slot="headerRight" style="color: #f48315">
								{{ item.state }}
							</view>
						</container>
					</view>
				</swiper-item>

				<swiper-item>
					<view class="containercontent">
						<container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
							<view>
								<view class="container">
									<image class="left" mode="scaleToFill" :src="item.image" />
									<view class="content">
										<view class="title1">
											{{ item.name }}
										</view>
										<view class="title2">
											{{ item.interpretation }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.dingdannumber }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.adress }}
											<view class="title2right">￥{{ item.price }}</view>
										</view>
									</view>
								</view>
							</view>

							<view slot="headerRight" style="color: #f48315">
								{{ item.state }}
							</view>
						</container>
					</view>
				</swiper-item>

				<swiper-item>
					<view class="containercontent">
						<container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
							<view>
								<view class="container">
									<image class="left" mode="scaleToFill" :src="item.image" />
									<view class="content">
										<view class="title1">
											{{ item.name }}
										</view>
										<view class="title2">
											{{ item.interpretation }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.dingdannumber }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.adress }}
											<view class="title2right">￥{{ item.price }}</view>
										</view>
									</view>
								</view>
							</view>

							<view slot="headerRight" style="color: #f48315">
								{{ item.state }}
							</view>
						</container>
					</view>
				</swiper-item>

				<swiper-item>
					<view class="containercontent">
						<container :title="item.number" v-for="(item, index1) in dingdan" :key="index1">
							<view>
								<view class="container">
									<image class="left" mode="scaleToFill" :src="item.image" />
									<view class="content">
										<view class="title1">
											{{ item.name }}
										</view>
										<view class="title2">
											{{ item.interpretation }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.dingdannumber }}
										</view>
										<view class="title2">
											<ant-icon type="LocationFill" />
											{{ item.adress }}
											<view class="title2right">￥{{ item.price }}</view>
										</view>
									</view>
								</view>
							</view>

							<view slot="headerRight" style="color: #f48315">
								{{ item.state }}
							</view>
						</container>
					</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	// import {
	// 	url
	// } from '@/utils/request.js';
	// import {
	// 	ref,
	// 	onMounted
	// } from 'vue';
	// import {
	// 	onShow,
	// 	onLoad
	// } from '@dcloudio/uni-app';
	// import {
	// 	onPullDownRefresh,
	// 	onReachBottom
	// } from "@dcloudio/uni-app";

	// export default {
	// 	components: {

	// 	},
	// 	data() {
	// 		return {
	// 			current: 4,
	// 			items: [{
	// 				title: '全部'
	// 			}, {
	// 				title: '待支付'
	// 			}, {
	// 				title: '待确认'
	// 			}, {
	// 				title: '带出行'
	// 			}, {
	// 				title: '售后'
	// 			}],
	// 			dingdan: [{
	// 				number: '订单编号  y123412341',
	// 				name: '厦门园林植物园',
	// 				interpretation: '游客通用票',
	// 				dingdannumber: '0234-2343 2134.2134.23',
	// 				image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.OErrMVtpfkTfUEGoGJxBggHaEp?rs=1&pid=ImgDetMain',
	// 				adress: ' 思明区湖苑里24号',
	// 				price: '100',
	// 				state: '待确认'
	// 			}, {
	// 				number: '订单编号  y123412341',
	// 				name: '厦门园林植物园',
	// 				interpretation: '游客通用票',
	// 				dingdannumber: '0234-2343 2134.2134.23',
	// 				image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.OErrMVtpfkTfUEGoGJxBggHaEp?rs=1&pid=ImgDetMain',
	// 				adress: ' 思明区湖苑里24号',
	// 				price: '100',
	// 				state: '待支付'
	// 			}, {
	// 				number: '订单编号  y123412341',
	// 				name: '厦门园林植物园',
	// 				interpretation: '游客通用票',
	// 				dingdannumber: '0234-2343 2134.2134.23',
	// 				image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.OErrMVtpfkTfUEGoGJxBggHaEp?rs=1&pid=ImgDetMain',
	// 				adress: ' 思明区湖苑里24号',
	// 				price: '100',
	// 				state: '已完成'
	// 			}]
	// 		};
	// 	},
	// 	methods: {
	// 		onSwipeChange(e) {
	// 			this.setData({
	// 				current: e.detail.current
	// 			});
	// 		},

	// 		onChange(current) {
	// 			this.setData({
	// 				current
	// 			});
	// 		},

	// 		handleChange(current) {
	// 			this.setData({
	// 				current
	// 			});
	// 		},

	// 		onPlus() {
	// 			this.alert('plus');
	// 		},

	// 		alert(content) {
	// 			uni.alert({
	// 				title: content
	// 			});
	// 		}
	// 	}
	// };
</script>
<style>
	.list {
		display: flex;
		flex-direction: column;
	}

	page {
		background-color: #f7f7f7;
	}

	.left {
		padding: 8px;
		background-image: url('https://img1.baidu.com/it/u=2381623835,372689691&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1719507600&t=572698b6469b1ae18d9a56a5d63973e3');
		width: 80px;
		height: 80px;
		border-radius: 10px;
	}

	.containercontent {
		margin: 15px 15px 0 15px;
	}

	.container {
		display: flex;
		color: #333333;
		border-radius: 10px;
	}

	.content {
		margin-left: 10px;
		line-height: 1.6;
		width: 70%;
	}

	.title1 {
		font-size: 18px;
	}

	.title2 {
		font-size: 14px;
		color: gray;
	}

	.title2right {
		float: right;
		color: red;
		font-size: 16px;
	}

	.tar {
		width: 100%;
		padding-bottom: 15px;
	}
</style>